<template>
  <div>
    <!-- 面包屑下的搜索框，购物车 -->
    <div class="header">
      <div class="headerBody" style="margin-top: 3px">
        <!-- Logo -->
        <div class="jaLogo" style="width: 300px">
          <img
            :src="logoImg"
            height="90%"
            width="90%"
            style="padding: 10px; float: left"
          />
        </div>
        <!-- 搜索框 -->
        <div>
          <div class="headerSelect">
            <input
              class="headerText"
              type="text"
              placeholder="请输入内容"
              v-model="searchtext"
            />
            <button class="headerButton" @click="search">
              <!-- <i
                class="el-icon-search"
                style="font-size: 20px; color: white"
              ></i> -->
              <img :src="searchimg" alt="" style="width: 100%; heighy: 100%" />
            </button>
          </div>
          <!-- 购物车 -->
          <div class="settingCar" @click="mybaycard">
            <i class="el-icon-shopping-cart-2" style="color: #2e4500"></i>
            <a href="" style="color: #2e4500">我的购物车</a>
          </div>
        </div>
      </div>
    </div>
    <!-- 中间板块1 -->
    <div class="center1" style="width: 75%; margin: auto; height: 500px">
      <!-- 中间板块1分类 -->
      <class-page></class-page>
      <!-- 中间板块1走马灯 -->
      <div class="block">
        <el-carousel trigger="click" style="height: 480px">
          <el-carousel-item
            v-for="footimg in footimgs"
            :key="footimg.id"
            style="height: 480px"
          >
            <a :href="footimg.adImageLink"
              ><img
                :src="localhostPath + footimg.adImagePath"
                style="height: 480px; width: 840px"
            /></a>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <br />
    <!-- 为你推荐 -->
    <div style="width: 100vw; margin: auto">
      <h3
        style="
          width: 250px;
          margin: auto;
          height: 45px;
          text-align: center;
          font-size: 28px;
        "
      >
        <span class="foru">为你推荐</span>
      </h3>
    </div>
    <!-- 商品群 -->
    <div class="commoditys" style="width: 1230px; margin: auto">
      <el-card
        style="
          width: 230px;
          height: 320px;
          margin-top: 20px;
          float: left;
          overflow: hidden;
          margin-right: 10px;
        "
        v-for="shangpin in shangpinqun"
        :key="shangpin.id"
      >
        <router-link :to="'/datail/' + shangpin.commodityId">
          <div class="commodityimg">
            <img
              v-if="shangpin.lib.length>0"
              :src="localhostPath+shangpin.lib[0].commodityPicturePath"
              style="width: 190px; height: 200px"
            />
            <img
              v-if="shangpin.lib.length==0"
              :src="shangpin.shangpinimg"
              style="width: 190px; height: 200px"
            />
          </div>
          <div
            class="commodityname"
            style="
            margin-top:10px
              width: 190px;
              height: 48px;
              overflow: hidden;
              text-align: left;
              font-size: 14px;
              line-height: 16px;
            "
          >
            {{ shangpin.commodityName }}
          </div>
          <div class="commodityprice" style="width: 190px; height: 20px">
            <strong>
              <span style="font-size: 14px; color: red"> ￥ </span>
              <span style="font-size: 20px; color: red">
                {{ shangpin.price }}
              </span>
            </strong>
          </div>
        </router-link>
      </el-card>
    </div>

    <!-- 底部备案 -->
    <div
      class="beian"
      style="
        float: left;
        width: 100vw;
        height: 200px;
        background-color: rgba(214, 214, 214, 0.32);
        margin-top: 10px;
      "
    >
      <br />
      <div
        style="
          margin: auto;
          width: 500px;
          display: flex;
          justify-content: center;
        "
      >
        <ul>
          <li>
            <label for="">版权所有:{{ this.webList.copyrigh }}</label>
          </li>
          <li>
            <label for="">公司地址:{{ this.webList.webAddress }}</label>
          </li>
          <li>
            <label for="">联系电话:{{ this.webList.telephone }}</label>
          </li>
          <li>
            <label for="">邮箱地址:{{ this.webList.dzyx }}</label>
          </li>
          <li>
            <el-link :underline="false" href="https://beian.miit.gov.cn/">{{
              this.webList.icp
            }}</el-link>
          </li>
          <li>
            <el-link
              type="primary"
              :underline="false"
              style="margin-left: 10px"
            >
              <img src="../imgs/beian.jpg" />{{ this.webList.policeRecord }}
            </el-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script scoped>
import ClassPage from "../components/ClassPage.vue";
import { getPic, getWebInfo } from "../api/web";
import { getCommSpu, getCommSpupicture } from "../api/comm";
import common from "../util/common";

export default {
  name: "HelloWorld",
  components: {
    ClassPage,
  },
  data() {
    return {
      searchimg: require("../assets/input.png"),
      localhostPath: common.localhostPath,
      toolTopbody: [],
      num: 0,
      searchtext: "",
      logoImg: "",
      // 分类循环li

      // 商品详情小图
      footimgs: [],
      webList: {},
      // 商品群
      shangpinqun: [
        // {
        //   id: 1,
        //   shangpinimg: require("../imgs/logoo.jpg"),
        //   commodityname:
        //     " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
        //   commodityprice: 29.9,
        // },
        // {
        //   id: 2,
        //   shangpinimg: require("../imgs/logoo.jpg"),
        //   commodityname:
        //     " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
        //   commodityprice: 29.9,
        // },
        // {
        //   id: 3,
        //   shangpinimg: require("../imgs/logoo.jpg"),
        //   commodityname:
        //     " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
        //   commodityprice: 29.9,
        // },
        // {
        //   id: 4,
        //   shangpinimg: require("../imgs/logoo.jpg"),
        //   commodityname:
        //     " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
        //   commodityprice: 29.9,
        // },
        // {
        //   id: 5,
        //   shangpinimg: require("../imgs/logoo.jpg"),
        //   commodityname:
        //     " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
        //   commodityprice: 29.9,
        // },
        // {
        //   id: 6,
        //   shangpinimg: require("../imgs/logoo.jpg"),
        //   commodityname:
        //     " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
        //   commodityprice: 29.9,
        // },
        // {
        //   id: 7,
        //   shangpinimg: require("../imgs/logoo.jpg"),
        //   commodityname:
        //     " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
        //   commodityprice: 29.9,
        // },
        // {
        //   id: 8,
        //   shangpinimg: require("../imgs/logoo.jpg"),
        //   commodityname:
        //     " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
        //   commodityprice: 29.9,
        // },
        // {
        //   id: 9,
        //   shangpinimg: require("../imgs/logoo.jpg"),
        //   commodityname:
        //     " 花西子龙凤牛口红套装/3支装彩妆化妆品组合牛年定制七夕情人节礼物送女友 龙凤牛知音礼盒（M126+M122+M117)",
        //   commodityprice: 29.9,
        // },
      ],
    };
  },
  mounted() {
    getPic().then(({ data }) => {
      this.footimgs = data.data;
    });
    getWebInfo().then(({ data }) => {
      this.logoImg = this.localhostPath + data.data.logoPath;
      this.webList = data.data;
    });
    setTimeout(() => {
      this.getPictureSpu();
    }, 200);
    this.getAllSpu();
  },
  methods: {
    //查询商品SPU
    getAllSpu() {
      getCommSpu()
        .then(({ data }) => {
          console.log(data);
          let newArr = [];
          data.data.forEach((element) => {
            let obj = {
              id: element.id,
              commodityName: element.commodityName,
              commodityId: element.commodityId,
              commodityExplain: element.commodityExplain,
              inventory: element.inventory,
              price: element.price,
              shangpinimg: require("../imgs/logoo.jpg"),
              lib: [],
            };
            newArr.push(obj);
          });
          this.shangpinqun = newArr;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //查找商品图片
    getPictureSpu() {
      getCommSpupicture()
        .then(({ data }) => {
          this.shangpinqun.forEach((element) => {
            data.data.forEach((item) => {
              if (element.commodityId == item.commodityId) {
                let obj={
                  commodityId:item.commodityId,
                  commodityPicturePath:item.commodityPicturePath
                }
                element.lib.push(obj);
              }
              // else{
              //   let obj={
              //     commodityId:item.commodityId,
              //     commodityPicturePath:"../imgs/logoo.jpg"
              //   }
              //   element.lib.push(obj);
              // }
            });
          });
          console.log(data);
          console.log(this.shangpinqun);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    Getaa() {
      console.log(1);
    },
    mybaycard() {
      var isUser = localStorage.getItem("userId");
      if (isUser == null) {
        this.$router.push("/login");
      } else {
        this.$router.push("/Cart");
      }
    },

    // 搜索框
    search() {
      console.log(this.searchtext);
      this.$router.push("/AllCommodity");
    },
  },
};
</script>

<style scoped>
button {
  cursor: pointer;
}

/* 头部 */
/* .header {
  background-color: #fff;
} */
/* 头部身体 */
.headerBody {
  margin: auto;
  height: 180px;
  width: 1000px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 搜索input */
.headerSelect {
  float: left;
  margin-left: 10px;
  /* position: absolute; */
  left: 260px;
  top: 25px;
  background: #fff;
  border-radius: 50px;
  border: 2px solid #2e4500;
}

.headerSelect .headerText {
  left: 0;
  padding: 2px 44px 2px 17px;
  width: 350px;
  height: 45px;
  border: 3px solid transparent;
  border-radius: 25px;

  line-height: 45px;
  font-size: 16px;
  outline: none;
}
.headerSelect .headerButton {
  float: right;
  width: 58px;
  height: 32.5px;
  background-color: transparent;
  border: none;
  outline: none;
}
/* 头部购物车 */
.settingCar {
  float: left;
  font-size: 16px;
  width: 130px;
  height: 45px;
  background-color: #fff;
  text-align: center;
  line-height: 45px;
  border: 1px solid #aeaeb3;
  margin-left: 15px;
  border-radius: 25px;
  margin-top: 5px;
}
.settingCar:hover {
  border: 1px solid #2e4500;
}

a {
  text-decoration: none;
  font-weight: 300 !important;
  color: rgb(0, 0, 0);
}
.commoditys a:hover {
  color: red !important;
}
/* 走马灯 */

.block {
  margin-left: 10px;
  margin-top: 16px;
  height: 500px;
  padding: 15px;
}

/* 为你推荐 */

.foru:after,
.foru:before {
  content: "";
  position: absolute;
  background-image: url(../imgs/sprite.png);
  width: 25px;
  height: 20px;
  margin-top: 10px;
}
.foru::before {
  margin-left: -35px;
}
.foru::after {
  margin-left: 10px;
}
/* .foru{
  position: absolute;
} */
</style>
<style>
.block .el-carousel__container {
  height: 450px !important;
}
.block img {
  image-rendering: -moz-crisp-edges; /* Firefox */
  image-rendering: -o-crisp-edges; /* Opera */
  image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
</style>
